<template>
    <div class="">
        <Breadcrumb :route="routes" />
         <div class="wb-container">
            <div class="mian-content">
                <div>
                    <div class="Withdrawa-content" v-if="!WithdrawalLogState">
                        <div class="alert alert-primary">
                            <p>
                                <b>商家提现说明</b>
                            </p>
                            <p>
                                商家提现的金额不得小于一元,商家提现的金额不能大于总的订单金额
                                <br>
                                平台会根据比列收取相应的费用
                            </p>
                        </div>
                        <div class="region-goods-details">
                            <el-row>
                                <el-col :span="4">
                                    <div class="region-goods-left">商家提现</div>
                                </el-col>
                                <el-col :span="20">
                                    <div class="region-goods-right">
                                        <div class="interestRate">
                                            商家的提现费率：<span>{{ interestRate + '%' }}</span>
                                        </div>
                                        <el-form :model="formMoney" label-width="120px" ref="formMoneyRef">
                                            <el-form-item label="提现金额:" prop="money">
                                                <el-input v-model.trim="formMoney.money" style="width: 60%;" />
                                            </el-form-item>
                                            <el-form-item>
                                                <div> 可提现金额：{{ amount }}元</div>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button @click="resetForm(formMoneyRef)">取消</el-button>
                                                <el-button type="primary" @click="confirmGetMoneyClick">确认</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </div>

                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <div class="Withdrawa-content" v-if="WithdrawalLogState">
                        <div class="Search-box">
                            <el-form :inline="true" :model="formList" ref="formListRef">
                                <el-form-item prop="status">
                                    <el-select v-model="formList.status" placeholder="请选择状态">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value" class="selectstyle" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item prop="status">
                                    <el-select v-model="formList.admin_user_id" placeholder="提现商家的ID">
                                        <el-option v-for="item in businessId" :key="item.id" :label="item.account"
                                            :value="item.id" class="selectstyle" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" style="margin-left: 10px;"
                                        @click="SearchMerchantWithdrawalClick">查询</el-button>
                                    <el-button type="primary" style="margin-left: 10px;"
                                        @click="SearchRemoveClick(formListRef)">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>

                        <div class="Withdrawal">
                            <el-table :data="LogList" v-loading="loading" style="width: 100%;height: 100%;" size="small"
                                :header-cell-style="{ background: '#44abf7', color: '#fff', fontSize: '14px', height: '40px', letterSpacing: '2px' }"
                                border>
                                <el-table-column prop="admin_user.account" label="申请商家" align="center" fixed />
                                <el-table-column prop="money" label="申请金额" width="100" align="center" />
                                <el-table-column prop="amount" label="提现金额" width="100" align="center" />
                                <el-table-column prop="withdrawal_rate" label="提现费率" width="100" align="center">
                                    <template #default="{ row }">
                                        <div>{{ row.withdrawal_rate }}%</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="admin_user.bank_card_number" label="银行卡号" align="center" />
                                <el-table-column prop="admin_user.bank_name" label="开户行" align="center" />
                                <el-table-column prop="created_at" label="申请时间" align="center" />
                                <el-table-column prop="status" label="申请状态" align="center">
                                    <template #default="{ row }">
                                        <div class="status-tag">
                                            <el-tag v-if="row.status == '2'">已通过</el-tag>
                                            <el-tag v-else-if="row.status == '1'" type="success">待审核</el-tag>
                                            <el-tag v-else-if="row.status == '3'" type="danger">已拒绝</el-tag>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="refuse" label="拒绝原因" align="center" />
                                <el-table-column prop="address" label="操作" width="200" align="center" fixed="right">
                                    <template #default="{ row }">
                                        <div>
                                            <el-button type="success" class="size" v-if="row.status == '1'"
                                                @click="applyAdoptClick(row)" v-has="'withdrawalSuccess'">通过</el-button>
                                            <el-button type="danger" class="size" v-if="row.status == '1'"
                                                @click="applyRefuseClick(row)" v-has="'withdrawalError'">拒绝</el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="noList" v-if="noList">暂无数据</div>
                        </div>
                        <div class="demo-pagination-block">
                            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                                :page-sizes="[5, 10, 15, 20]" :small="small" :disabled="disabled" :background="background"
                                layout="total, sizes, prev, pager, next, jumper" :total="total"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                        </div>
                    </div>
                </div>
            </div>
            <el-dialog v-model="centerDialogVisible" title="通过提现" width="30%" align-center>
                <span class="PassThrough">通过{{ businessName }}商家的提现申请</span>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="centerDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="confirmClick">
                            确认
                        </el-button>
                    </span>
                </template>
            </el-dialog>
            <el-dialog v-model="DialogVisible" title="拒绝提现" width="30%" align-center>
                <span class="NoBusiness">拒绝{{ businessName }}商家的提现申请</span>
                <div class="NoBusiness-reason">
                    <el-input v-model="textarea" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                        placeholder="输入拒绝理由" />
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cancelClick">取消</el-button>
                        <el-button type="primary" @click="confirmRefusalToWithdraw">
                            确认
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import Breadcrumb from '@/components/nav-header'
import { ElMessage } from 'element-plus';
import { WithdrawalLog, WithdrawalLogApplyAdopt, WithdrawalLogApplyRefuse, WithdrawalLogApply, getBusinessWithdrawalRate, getAdminUserAmount } from '@/api/finance'
import { businessList } from '@/api/business'
import { useStore } from 'vuex';

const route = useRoute()
const routes = ref()
const store = useStore()
const user = ref(JSON.parse(store.state.UserInfo))
const WithdrawalLogState = ref(false)
const LogList = ref([])
const amount = ref(null)
const loading = ref(true)
const formMoney = reactive({
    money: 0
})
const formList = reactive({
    status: '',
    admin_user_id: '',
    limit: '',
    page: ''
})
const options = reactive([
    {
        label: '待审核',
        value: '1'
    },
    {
        label: '已通过',
        value: '2'
    },
    {
        label: '已拒绝',
        value: '3'
    }
])
const formListRef = ref()
const formMoneyRef = ref()
const centerDialogVisible = ref(false) //提现弹框
const businessName = ref('') //商家名称
const businessMoney = ref('') //提现金额
const DialogVisible = ref(false) //拒绝提现弹框
const textarea = ref('')
const noList = ref(false)
const data = reactive({
    admin_user_withdrawal_log_id: '',
    reason: ''
})
//分页
const currentPage = ref(1)
const pageSize = ref(15)
const small = ref(true)
const background = ref(true)
const disabled = ref(false)
const total = ref(0)
//商家的提现利率
const interestRate = ref(0)
//商家的id
const businessId = ref([])
const pattern = ref(/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/)

onMounted(() => {
    routes.value = route.matched
    let roleNmae = Object.values(user.value.role_name)
    if (roleNmae.includes('BOSS')) {
        WithdrawalLogState.value = true
        getWithdrawalLogList()
        getAdminUser()
    } else {
        WithdrawalLogState.value = false
        getBusiness()
        getAdminAmount()
    }
})
//商家的提现费率
const getBusiness = async () => {
    const result = await getBusinessWithdrawalRate().then(s => {
        const { code, data } = s
        if (code == 200) {
            interestRate.value = data
        }
    })
}
//商家可提现金额
const getAdminAmount = async () => {
    await getAdminUserAmount().then(r => {
        const { code, data } = r
        if (code == 200) {
            amount.value = data
        }
    })
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const getWithdrawalLogList = async () => {
    const result = await WithdrawalLog(formList).then(s => {
        const { code, data } = s
        loading.value = false
        if (code == 200) {
            LogList.value = data.data
            total.value = data.total
            if (LogList.value.length == 0) {
                noList.value = true
            } else {
                noList.value = false
            }
        } else {
            LogList.value = []
        }
    }).catch(error => {
        loading.value = false
    })
}
//通过提现
const applyAdoptClick = (row) => {
    centerDialogVisible.value = true
    businessMoney.value = row.id
    businessName.value = row.admin_user.account
}
const confirmClick = async () => {
    const result = await WithdrawalLogApplyAdopt({ admin_user_withdrawal_log_id: businessMoney.value }).then(r => {
        const { code, data } = r
        if (code == 200) {
            ElMessage.success('操作成功')
            centerDialogVisible.value = false
            getWithdrawalLogList()
        }
    })
}
//拒绝提现
const applyRefuseClick = (row) => {
    DialogVisible.value = true
    businessName.value = row.admin_user.account
    data.admin_user_withdrawal_log_id = row.id
}
const confirmRefusalToWithdraw = async () => {
    data.reason = textarea.value
    if (data.reason == '') {
        ElMessage.error('输入拒绝申请的原因')
        return
    }
    const result = await WithdrawalLogApplyRefuse(data).then(s => {
        const { code, data } = s
        if (code == 200) {
            ElMessage.success('操作成功')
            textarea.value = ''
            DialogVisible.value = false
            getWithdrawalLogList()
        }
    })
}
const cancelClick = () => {
    textarea.value = ''
    DialogVisible.value = false
}
//申请提现
const confirmGetMoneyClick = async () => {
    if (formMoney.money == '') {
        ElMessage.error('输入金额')
        return
    } else if (formMoney.money <= 1) {
        ElMessage.error('输入金额不得小于一元')
        return
    }
    if (pattern.value.test(formMoney.money) == false) {
        ElMessage.error('提现金额保留两位小数')
        return
    }
    const result = await WithdrawalLogApply(formMoney).then(response => {
        const { code, data } = response
        if (code == 200) {
            ElMessage.success('申请成功')
        }
    })
}
//搜索
const SearchMerchantWithdrawalClick = () => {
    getWithdrawalLogList()
}
//表单重置
const SearchRemoveClick = (formListEl) => {
    if (!formListEl) return
    formListEl.resetFields()
    getWithdrawalLogList()
}

const handleSizeChange = (page) => {
    formList.limit = page
    getWithdrawalLogList()
}
const handleCurrentChange = (current) => {
    formList.page = current
    getWithdrawalLogList()
}
const getAdminUser = async () => {
    const result = await businessList().then(r => {
        const { code, data } = r
        if (code == 200) {
            businessId.value = data.data
        }
    })
}

</script>

<style lang="less" scoped>
.Withdrawa-content {
    margin-top: 20px;
}

.Withdrawa-content .Withdrawal::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: rgba(0, 0, 0, 0.1);
}

.Withdrawa-content .Withdrawal::-webkit-scrollbar-thumb {
    background-color: #888;
}

.Withdrawa-content .Withdrawal::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

:deep(.el-dialog__title) {
    color: #509eff;
}

.NoBusiness {
    color: red;
    font-size: 14px;
}

.PassThrough {
    color: #67c23a;
    font-size: 14px;
}

.NoBusiness-reason {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}

.Search-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
}


.interestRate {
    margin-bottom: 20px;
    font-size: 12px;
    color: #888;

    span {
        color: red;
        font-size: 14px;
    }
}

:deep(.el-table) {
    .cell:empty::before {
        content: "---";
        color: #ccc;
    }

    .is-leaf {
        .cell:empty::before {
            content: "---";
            color: #ccc;
        }
    }
}

.Withdrawal .el-descriptions {
    margin: 20px 40px;
}

.Withdrawal .el-descriptions:hover {
    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.3);
}

.size {
    padding: 4px 5px;
    border-radius: 10px;
}

.status-tag {
    margin: 10px;
}

.operate {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    margin: 10px 40px 10px 0;

    .el-button {
        margin-right: 20px;
    }
}

:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
    background-color: #f4f4f5;
    color: black;
}

:deep(.el-descriptions .el-descriptions__header) {
    border-top: 1px solid #efefef;
    border-left: 1px solid #efefef;
    border-right: 1px solid #efefef;
    margin: 0;
}

:deep(.el-button) {
    padding: 2px 6px;
    letter-spacing: 2px;
    font-size: 14px;
}

.noList {
    width: 100%;
    height: 200px;
    line-height: 200px;
    text-align: center;
}

.addBankCard {
    background: #f8f8f8;
    margin-bottom: 10px;
    padding: 0 10px;
}

.addBankCard-title {
    text-align: center;
    padding-top: 20px;
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding: 20px 0;

}

.addBankCard-form {
    border-left: 3px solid #fff;
    padding: 10px 10px;
}
</style>
